<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <link rel="stylesheet" href="./页面样式.css">
</head>

<body>
    <div class="box">
        <div class="shang">
            <img src="./fruit.jpg">
        </div>
        <p class="s1"><span class="iconfont icon-fangzi"></span>/购物车</p>
        <table style="border-collapse: collapse;">
            <thead>
                <tr>
                    <th>选中</th>
                    <th>图片</th>
                    <th>单价</th>
                    <th>个数</th>
                    <th>小计</th>
                    <th>操作</th>
                </tr>
            </thead>
            <tbody>
                <!-- <tr>
                    <td><input type="checkbox" name="" id=""></td>
                    <td><img src="./榴莲.png"></td>
                    <td></td>
                    <td>
                        <button onclick="jian()" style="width: 30px; height: 30px;">-</button>
                        <span><input type="text" style="width: 50px; height: 30px;" class="gs"></span>
                        <button onclick="jia()" style="width: 30px; height: 30px;">+</button>
                    </td>
                    <td></td>
                    <td><button style="color: white; background-color: red; width: 60px; height: 30px; border: none;">删除</button></td>
                </tr> -->
            </tbody>
            <tfoot>
                <tr>
                    <td colspan="3" class="s2"><input type="checkbox" name="" id="" class="qx"> 全选</td>
                    <td colspan="2">总价 : ￥ <span style="color: rgb(255, 104, 180); font-size: 35px;" class="zj"></span>
                    </td>
                    <td><button
                            style="background-color: rgb(63, 133, 237); color: white; width: 100px;height: 40px; border: none;">结算<span
                                class="sl"></span></button></td>
                </tr>
            </tfoot>
        </table>
        <div class="kong">🛒空空如也</div>
    </div>
</body>

</html>
<script>
    const dataArr = [
        {
            id: 1,
            icon: './火龙果.png',
            isChecked: true,
            num: 2,
            price: 6,
        },
        {
            id: 2,
            icon: './荔枝.png',
            isChecked: false,
            num: 7,
            price: 20,
        },
        {
            id: 3,
            icon: './榴莲.png',
            isChecked: false,
            num: 3,
            price: 40,
        },
        {
            id: 4,
            icon: './鸭梨.png',
            isChecked: true,
            num: 10,
            price: 3,
        },
        {
            id: 5,
            icon: './樱桃.png',
            isChecked: false,
            num: 20,
            price: 34,
        },
    ]
    var tbody = document.querySelector('tbody')
    var qx = document.querySelector('.qx')
    function xr() {
        const strArr = dataArr.map((ele, index) => {
            return `
                <tr data-id="${index}">
                    <td><input type="checkbox" name="" id=""  ${ele.isChecked ? 'checked' : ''}></td>
                    <td><img src="${ele.icon}"></td>
                    <td>${ele.price}</td>
                    <td>
                        <button onclick="jian()" style="width: 30px; height: 30px;" class="jian">-</button>
                        <span><input type="text" style="width: 50px; height: 30px;" class="gs" value="${ele.num}"></span>
                        <button onclick="jia()" style="width: 30px; height: 30px;" class="jia">+</button>
                    </td>
                    <td>${ele.price * ele.num}</td>
                    <td><button style="color: white; background-color: red; width: 60px; height: 30px; border: none;" class="del">删除</button></td>
                </tr>
            `
        }).join('')
        tbody.innerHTML = strArr
        qx.checked = dataArr.every(ele => ele.isChecked == true)
        const newArr = dataArr.filter(ele => ele.isChecked === true)
        let zj = document.querySelector('.zj')
        let sl = document.querySelector('.sl')
        let totalCount = newArr.reduce((prey, item) => prey + item.num, 0)
        let totalPrice = newArr.reduce((prey, item) => prey + item.price * item.num, 0)
        zj.innerHTML = totalPrice.toFixed(2)
        sl.innerHTML = totalCount
        var kong = document.querySelector('.kong')
        kong.style.display = dataArr.length == 0 ? 'block' : 'none'
    }
    tbody.addEventListener('click', function (e) {
        const id = e.target.parentNode.parentNode.dataset.id
        if (e.target.className == 'del') {
            dataArr.splice(id, 1)
            xr()
        }
        if (e.target.className == 'jia') {
            dataArr[id].num++
            xr()
        }
        if (e.target.className == 'jian') {
            if (dataArr[id].num > 1) {
                dataArr[id].num--
                xr()
            } else {
                dataArr[id].num = 1
            }
        }
        if (e.target.tagName == 'INPUT') {
            dataArr[id].isChecked = e.target.checked
            xr()
        }
    })
    qx.addEventListener('click', function (e) {
        dataArr.forEach(ele => ele.isChecked = this.checked)
        xr()
    })
    xr()
</script>